<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="上古装车计划" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <CarLeftA :data="dataA" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="兰州石化装车计划" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <CarLeftB :data="dataB" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="车辆进出管理" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <!-- <CarLeftC :data="cyData" width="100%" height="80%" style="margin-top: 10%"/> -->
                <CarLeftD :data="DataDevice" />
            </div>
        </div>
    </div>
</template>

<script>
import { car_left, car_right } from "@/request/api.js";
import CarLeftA from './components/CarLeftA'
import CarLeftB from './components/CarLeftB'
import CarLeftC from './components/CarLeftC'
import CarLeftD from './components/CarLeftD'
export default {
    components: {
        CarLeftA,
        CarLeftB,
        CarLeftC,
        CarLeftD
    },
    data() {
        return {
            cyData: [],
            dataA: { time: [], shangguEthane: [], shangguLighthydrocarbon: [], shangguLiquefiedgas: [] },
            dataB: { time: [], lanzhouLiquefiedgas: [], lanzhouLighthydrocarbon: [] },
            DataDevice: []
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            car_left().then((res) => {
                console.log("res:", res);
                res.data.data1.forEach(element => {
                    this.dataA.time.push(element.entruckTime)
                    this.dataA.shangguEthane.push(element.shangguEthane)
                    this.dataA.shangguLighthydrocarbon.push(element.shangguLighthydrocarbon)
                    this.dataA.shangguLiquefiedgas.push(element.shangguLiquefiedgas)
                });
                res.data.data2.forEach(element => {
                    this.dataB.time.push(element.entruckTime)
                    this.dataB.lanzhouLiquefiedgas.push(element.lanzhouLiquefiedgas)
                    this.dataB.lanzhouLighthydrocarbon.push(element.lanzhouLighthydrocarbon)
                });
                this.cyData = res.data.data3

            }),
                car_right().then((res) => {
                    this.DataDevice = res.data.data3
                })

        }
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 337px;

    .div1_d {
        margin-top: 10px;
    }
}

.div2 {
    height: 343px;

    .div1_d {
        margin-top: 20px;
    }
}

.div3 {
    .div1_d {}
}
</style>